<template>
  <div class="stuTable">
       <div class="search">
           <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-button icon="el-icon-search" square></el-button>
           <el-button type="primary" @click="addStu">添加项目</el-button> 
       </div>
       <div class="select">
         <span>选择班级:</span>
         <el-select v-model="value" filterable placeholder="请选择">
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
       </div>
    <el-table
    :data="stuData"
    v-loading="loading"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="headimgurl"
      label="头像"
      width="120"
      align="center">
      <template v-slot="scope">
        <el-avatar shape="square"
        :size="50" fit="fill"
        :src="scope.row.headimgurl">
        </el-avatar>
      </template>

    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="city"
      label="学历"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="class"
      label="班级"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="productUrl"
      label="项目"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="cTime"
      label="创建时间"
      width="250"
      align="center">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="250"
      align="center">
      <template v-slot="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button @click="editStu(scope.row)" type="text" size="small">编辑</el-button>
        <el-button  @click="delStu(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
      <dailog></dailog>
  </div>
</div>
</template>
<script>
import * as api from "../../../../api"
import dailog from "../../../../components/Dialog"
import { mapState , mapActions , mapMutations } from "vuex"
  export default {
    components:{
            dailog
      },
    computed: {
          ...mapState(["stuData"])
      },
    methods: {
        ...mapActions(["GET_STULIST"]),
        ...mapMutations(["SHOW_DIALOG","CHANGE_DIALOG_TITLE","SET_CURRENT_ROW"]),
        addStu(){
           this.CHANGE_DIALOG_TITLE("增加学员信息")
           this.SHOW_DIALOG()
        },
        delStu(row){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.removeStuApi(row.sId)
          .then(res =>{
            console.log(row);
            if(res.data.state){
              this.GET_STULIST()
                this.$message({
                type: 'success',
               message: '删除成功!'
                });
            }else{
              this.$message.error("删除失败")
            }
          })
         
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除'
          });          
        });
        },
        editStu(row){
          this.CHANGE_DIALOG_TITLE("编辑学员信息")
          this.SHOW_DIALOG()
          this.SET_CURRENT_ROW(row)    
        }
    },
    data() {
      return {
         loading:true,
         input:""
      }
    },
    created () {
        this.GET_STULIST(),
        this.loading = false
    }
  }
</script>
<style lang="less">
.search{
    line-height: 60px;
    text-align: left;
    margin: 20px 0;
    
    .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 300px;
}
    .el-input__inner{
    display: inline-block;
    position: relative;
    width: 300px;
    }
    .el-button{
     display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    // padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    }
    .el-button--default{
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
    }
    .el-button--primary{
    margin-left: 10px;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
   }
}

.select{
    line-height: 40px;
    position: relative;
    font-size: 14px;
    text-align: left;
    margin-bottom: 20px;

    span{
      margin-right: 10px;
    }
}
</style>